<template>
  <div>
    <el-row style="margin: 18px 0px 0px 18px ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard'}">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/content/book'}">内容管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/content/article'}">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑器</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-input
        v-model="article.articleTitle"
        style="margin: 10px 0px;font-size: 18px;"
        placeholder="请输入标题"></el-input>
    </el-row>
    <el-row style="height: calc(100vh - 140px);">
      <mavon-editor
        v-model="article.articleContentMd"
        style="height: 100%;"
        ref=md
        @save="saveArticles"
        fontSize="16px">
<!--    slot="left-toolbar-after"      -->
        <button type="button" class="op-icon el-icon-document" :title="'摘要/封面'"
                @click="dialogVisible = true"></button>
      </mavon-editor>
<!--    :visible.sync="dialogVisible"    -->
      <el-dialog
        v-model="dialogVisible"
        width="30%">
        <el-divider content-position="left">摘要</el-divider>
        <el-input
          type="textarea"
          v-model="article.articleAbstract"
          rows="6"
          maxlength="255"
          show-word-limit></el-input>
        <el-divider content-position="left">封面</el-divider>
        <div style="margin-top: 20px">
          <el-input v-model="article.articleCover" autocomplete="off" placeholder="图片 URL"></el-input>
          <img-upload @onUpload="uploadImg" ref="imgUpload" style="margin-top: 5px"></img-upload>
        </div>
<!--       slot="footer"   -->
        <span  class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  import ImgUpload from './ImgUpload'
  import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";

  export default {
    name: 'Editor',
    components: {ImgUpload},
      setup(){
        const data = reactive({
            article: {},
            dialogVisible: false
        })

          let {proxy} = getCurrentInstance()

          onMounted(()=>{
              if (proxy.$route.params.article) {
                  data.article = proxy.$route.params.article
              }
          })

          function saveArticles (value, render) {
              // value 是 md，render 是 html
              proxy.$confirm('是否保存并发布文章?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                      proxy.$axios
                          .post('/admin/content/article', {
                              id: data.article.id,
                              articleTitle: data.article.articleTitle,
                              articleContentMd: value,
                              articleContentHtml: render,
                              articleAbstract: data.article.articleAbstract,
                              articleCover: data.article.articleCover,
                              articleDate: data.article.articleDate
                          }).then(resp => {
                          if (resp && resp.data.code === 200) {
                              proxy.$message({
                                  type: 'info',
                                  message: '已保存成功'
                              })
                          }
                      })
                  }
              ).catch(() => {
                  proxy.$message({
                      type: 'info',
                      message: '已取消发布'
                  })
              })
          }
          function uploadImg () {
              data.article.articleCover = proxy.$refs.imgUpload.url
          }

          return {
            ...toRefs(data),
              onMounted,
              saveArticles,
              uploadImg
          }
      }
  }
</script>
